<!--
 * @Description: 新建、编辑多路复制保护组
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-09-28 14:59:18
 * @LastEditTime: 2021-11-10 17:25:19
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <el-dialog
    :title="dialogTitle"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form
      ref="multipleForm"
      :model="form"
      :rules="rules"
      label-width="80px"
      label-position="right"
    >
      <!-- 名称 -->
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="填写名称"></el-input>
      </el-form-item>
      <!-- 类型 -->
      <el-form-item label="类型" prop="type">
        <el-select v-model="form.type" style="width:100%;" @change="changeType" disabled>
          <el-option value="multiple" label="多路复制"></el-option>
          <!-- <el-option value="FEC" label="前向纠错"></el-option> -->
        </el-select>
      </el-form-item>
      <!-- multiple侧的 主、备端口 -->
      <template v-if="form.type === 'multiple'">
        <!-- 主端口 -->
        <el-form-item label="主端口" prop="masterPort">
          <el-select v-model="form.masterPort" style="width:100%;" @change="changeMasterPort">
            <el-option
              v-for="(item, index) in multipePortList"
              :key="index"
              :value="item.name"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 备端口 -->
        <el-form-item label="备端口" prop="protectorPort">
          <el-select v-model="form.protectorPort" style="width:100%;" @change="changeProtectorPort">
            <el-option
              v-for="(item, index) in multipeBackupList"
              :key="index"
              :value="item.name"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['ne', 'type', 'dialogStatus', 'packetsInfo'],
  data () {
    return {
      dialogTitle: '新建多路复制保护组',
      form: {
        id: null,
        name: null,
        master: null,
        masterPort: null,
        protector: null,
        protectorPort: null,
        groupId: 1,
        type: 'multiple'
      },
      rules: {
        name: [{
          required: true,
          message: '请输入配置名称',
          trigger: 'blur'
        }],
        masterPort: [{
          required: true,
          message: '请选择主端口',
          trigger: 'change'
        }],
        protectorPort: [{
          required: true,
          message: '请选择备端口',
          trigger: 'change'
        }],
        type: [{
          required: true,
          message: '请选择类型',
          trigger: 'change'
        }]
      },
      multipePortList: [],
      multipeBackupList: []
    };
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'create') {
          _this.dialogTitle = '新建多路复制保护组';
          _this.form = {
            id: null,
            name: null,
            master: null,
            masterPort: null,
            protector: null,
            protectorPort: null,
            groupId: 1,
            type: 'multiple'
          };
        } else {
          _this.dialogTitle = '编辑多路复制保护组';
          _this.form = {
            id: _this.packetsInfo.id,
            name: _this.packetsInfo.name,
            master: _this.packetsInfo.master,
            masterPort: _this.packetsInfo.masterPort,
            protector: _this.packetsInfo.protector,
            protectorPort: _this.packetsInfo.protectorPort,
            groupId: _this.packetsInfo.groupId,
            type: _this.packetsInfo.type
          };
        }
      }
    }
  },
  created () {
    this.getFceProtList();
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$refs['multipleForm'].resetFields();
      _this.$emit('handleDialog', false);
      _this.clearData();
    },
    // 清空数据
    clearData () {
      let _this = this;
      _this.form = {
        id: null,
        name: null,
        master: null,
        masterPort: null,
        protector: null,
        protectorPort: null,
        groupId: 1,
        type: 'multiple'
      };
    },
    // 获取接口
    getFceProtList () {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/ethport/getStaticsPorts/' + _this.ne.id,
      }).then((res) => {
        let { status, resultBody } = res;
        if (status === '0') {
          let multipeList = [];
          for (let i = 0; i < resultBody.length; i++) {
            if (resultBody[i].name.indexOf('gei') > -1 || resultBody[i].name.indexOf('xgei') > -1) {
              multipeList.push(resultBody[i]);
            }
          }
          _this.multipePortList = multipeList;
          _this.multipeBackupList = multipeList;
        }
      });
    },
    // 选择端口 过滤状态
    changeMasterPort (val) {
      let _this = this;
      if (val === _this.form.protectorPort) {
        _this.$message.error('主端口和备端口不可以相同');
        _this.form.masterPort = null;
      } else if (val.indexOf('.') > -1) {
        if (_this.form.type === 'FEC') {
          _this.$message.error('主端口不允许选择子端口');
          _this.form.masterPort = null;
        }
      }
    },
    changeProtectorPort (val) {
      let _this = this;
      if (val === _this.form.masterPort) {
        _this.$message.error('主端口和备端口不可以相同');
        _this.form.protectorPort = null;
      }
    },
    // 选择类型 类型为FEC时 备端口过滤为子接口
    changeType (val) {
      let _this = this;
      _this.form.masterPort = null;
      _this.form.protectorPort = null;
    },
    // 确认
    onSubmit () {
      let _this = this;
      _this.$refs['multipleForm'].validate((valid) => {
        if (valid) {
          let params = {
            id: _this.form.id,
            neId: _this.ne.id,
            name: _this.form.name,
            master: _this.form.master,
            masterPort: _this.form.masterPort,
            protector: _this.form.protector,
            protectorPort: _this.form.protectorPort,
            groupId: 1,
            type: _this.form.type,
          };
          if (_this.form.id) {
            params.id = _this.form.id;
          }
          let url = _this.form.id ? '/api/sdwan/multiple/update' : '/api/sdwan/multiple/create';
          _this.$http.post({
            url: url,
            data: params
          }).then(res => {
            let { status } = res;
            if (status === '0') {
              if (_this.form.id) {
                _this.$message.success('更新成功！');
              } else {
                _this.$message.success('创建成功！');
              }
              _this.$emit('handleDialog', false);
              _this.clearData();
              _this.$parent.refresh();
            }
          });
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>